<template>
  <div id="info" ref="info">
    <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
    <h2>补间组</h2>
  </div>
</template>

<script setup lang="ts">
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import { ref, onMounted } from "vue";
const info = ref<HTMLElement>(null);

const groupA = new TWEEN.Group();
const groupB = new TWEEN.Group();

function init() {
  var outputA = document.createElement("div");
  var outputB = document.createElement("div");
  var outputC = document.createElement("div");
  outputA.style.cssText =
    "position: absolute; left: 500px; font-size: 40px; top: 300px;";
  outputB.style.cssText =
    "position: absolute; left: 500px; font-size: 40px; top: 340px;";
  outputC.style.cssText =
    "position: absolute; left: 500px; font-size: 40px; top: 380px;";
  info.value.appendChild(outputA);
  info.value.appendChild(outputB);
  info.value.appendChild(outputC);

  var tweenA = new TWEEN.Tween({ x: 50, y: 0 }, groupA)
    .to({ x: 400 }, 2000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(update(outputA, "outputA"))
    .start();
  var tweenB = new TWEEN.Tween({ x: 50, y: 0 }, groupB)
    .to({ x: 400 }, 2000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(update(outputB, "outputC"))
    .start();
  var tweenC = new TWEEN.Tween({ x: 50, y: 0 })
    .to({ x: 400 }, 2000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(update(outputC, "outputC"))
    .easing(TWEEN.Easing.Quadratic.In)
    .start();

  animate();
  function update(dom, title) {
    return function (object) {
      dom.innerHTML = title + " x == " + Math.round(object.x);
      var transform = "translateX(" + object.x + "px)";
      dom.style.webkitTransform = transform;
      dom.style.transform = transform;
    };
  }
}
function animate() {
  requestAnimationFrame(animate);

  groupA.update(); // 只更新tweenA
  groupB.update(); // 只更新tweenB
  TWEEN.update(); // 只更新tweenC

  // groupA.removeAll(); // 只移除tweenA
  // groupB.removeAll(); // 只移除tweenB
  // TWEEN.removeAll(); // 只移除tweenC
}

onMounted(() => {
  init();
});
</script>

<style></style>
